body {
  background: #b4da55;
}
#loading_container{
  width: 50px;
  height: 50px;
  position: absolute;
  margin: auto;
  display: block;
  top: 50%;
  left: 50%;
  -webkit-transform: rotate(90deg);
}
.loading{
  display: block;
  background: rgba(255,255,255,0.8);
  width:10%;
  height:5px;
  border-radius:10px;
  -webkit-transform: translateX(0);
}
.load{
  -webkit-animation: loading 1s infinite;
}
<
/*Animacion*/
@-webkit-keyframes loading {
  0%{
    -webkit-transform: translateX(0);
    box-shadow:
      0px 2px 10px 0px rgba(255,255,255,0.8),
      0px -2px 10px 0px rgba(255,255,255,0.8);
  }
  25%{
    -webkit-transform: translateX(0);
    box-shadow:
      0px 10px 0px 0px rgba(255,255,255,0.8),
      0px 20px 0px 0px rgba(255,255,255,0.8),
      0px 30px 0px 0px rgba(255,255,255,0.8),
      0px 40px 0px 0px rgba(255,255,255,0.8);
  }
  50%{
    -webkit-transform: translateX(0);
    box-shadow:
      0px -10px 0px 0px rgba(255,255,255,0.8),
      0px -20px 0px 0px rgba(255,255,255,0.8),
      0px -30px 0px 0px rgba(255,255,255,0.8),
      0px -40px 0px 0px rgba(255,255,255,0.8);
  }
  75%{
    -webkit-transform: translateX(0);
    box-shadow:
      0px 50px 0px 0px rgba(255,255,255,0.8),
      0px 25px 0px 0px rgba(255,255,255,0.8),
      0px -25px 0px 0px rgba(255,255,255,0.8),
      0px -50px 0px 0px rgba(255,255,255,0.8);
  }
  100%{
    -webkit-transform: translateX(0);
    box-shadow:
      0px 2px 10px 0px rgba(255,255,255,0.8),
      0px -2px 10px 0px rgba(255,255,255,0.8);
  }
}